<template>
	<view class="home">
		<u-navbar @leftClick="leftClick" @rightClick="rightClick" placeholder :safeAreaInsetTop="true" :title="title"
			:fixed="true" rightIcon="order">
		</u-navbar>
		<!-- 标签 -->
		<u-sticky offsetTop="40">
			<view class="tab_box">
				<u-tabs :list="measurementArr" @click="tabFn" lineColor="#4b8aff" :activeStyle="{
			    color: '#4b8aff',
			    transform: 'scale(1.5)'
			}" :inactiveStyle="{
			    color: '#606266',
			    transform: 'scale(1.4)'
			}" itemStyle="padding-left: 20px; padding-right: 20px; height: 50px;"></u-tabs>
			</view>
		</u-sticky>
		<view class="condata">
			<u-empty mode="list" v-show="devList.length == 0"></u-empty>
			<view class="condata_i" v-for="(i,index) in devList" :key="index" @click="devbutFn(i)"
				@longpress="devlonFn(i)" v-show="devList.length != 0">
				<image class="img" :src="i.productImage" mode=""></image>
				<view class="titie">
					<view class="text_a">
						{{i.remarksName}}
					</view>
					<view class="text_b">
						设备名称：{{i.nickName}}
					</view>
				</view>
			</view>
		</view>
		<!-- 删除弹窗 -->
		<u-modal :show="deleteshow" showCancelButton title="是否解绑设备" @confirm="confirmdel" @cancel="canceldel"></u-modal>
		<!-- 断面参数弹窗 -->
		<u-popup :safeAreaInsetBottom="true" :safeAreaInsetTop="true" :mode="popupData.mode" :show="popupshow"
			:round="popupData.round" :overlay="popupData.overlay" :closeOnClickOverlay="popupData.closeOnClickOverlay">
			<view class="u-popup-slot">
				<view class="bder" v-for="(i,index) in stationProfileList" :key="index">
					<view class="titie_top">
						{{i.name}}
					</view>
					<view class="con_top">
						<view class="text">
							断面编号：
						</view>
						<view class="con">
							{{i.nub}}
						</view>
					</view>
					<view class="con_top">
						<view class="text">
							经度：
						</view>
						<view class="con">
							{{i.lot}}
						</view>
					</view>
					<view class="con_top">
						<view class="text">
							纬度：
						</view>
						<view class="con">
							{{i.lat}}
						</view>
					</view>
					<view class="con_top">
						<view class="text">
							形状：
						</view>
						<view class="con">
							<u-tag text="梯形" type="primary" v-if="i.xingzhuang == 0"></u-tag>
							<u-tag text="矩形" type="primary" v-if="i.xingzhuang == 1"></u-tag>
						</view>
						
					</view>
					<view class="con_top">
						<view class="text">
							渠底宽度：
						</view>
						<view class="con">
							{{i.qudikuandu}}
						</view>
					</view>
					<view class="con_top">
						<view class="text">
							设计水深：
						</view>
						<view class="con">
							{{i.shejishuishen}}
						</view>
					</view>
					<view class="con_top">
						<view class="text">
							设计流量：
						</view>
						<view class="con">
							{{i.shejiliuliang}}
						</view>
					</view>
					<view class="con_top">
						<view class="text">
							上限水深：
						</view>
						<view class="con">
							{{i.shangxianshuishen}}
						</view>
					</view>
					<view class="con_top">
						<view class="text">
							下限水深：
						</view>
						<view class="con">
							{{i.xiaxianshuishen}}
						</view>
					</view>
					<view class="con_top">
						<view class="text">
							渠底纵坡：
						</view>
						<view class="con">
							{{i.qudizongpo}}
						</view>
					</view>
					<view class="con_top">
						<view class="text">
							渠底糙率：
						</view>
						<view class="con">
							{{i.qupocaolv}}
						</view>
					</view>
					<view class="con_top">
						<view class="text">
							左坡角：
						</view>
						<view class="con">
							{{i.lsa}}
						</view>
					</view>
					<view class="con_top">
						<view class="text">
							右坡角：
						</view>
						<view class="con">
							{{i.rsa}}
						</view>
					</view>
					<view class="con_top">
						<view class="text">
							测线布置：
						</view>
						<view class="con">
							<u-tag text="均匀" type="success" v-if="i.cexianbuzhi == 0"></u-tag>
							<u-tag text="不均匀" type="success" v-if="i.cexianbuzhi == 1"></u-tag>
						</view>
					</view>
					<view class="con_top">
						<view class="text">
							默认测法：
						</view>
						<view class="con">
							<u-tag text="1点法" type="warning" v-if="i.morencefa == 0"></u-tag>
							<u-tag text="3点法" type="warning" v-if="i.morencefa == 1"></u-tag>
						</view>
					</view>
					<view class="con_top">
						<view class="text">
							左坡系数：
						</view>
						<view class="con">
							{{i.kl}}
						</view>
					</view>
					<view class="con_top">
						<view class="text">
							右坡系数：
						</view>
						<view class="con">
							{{i.kr}}
						</view>
					</view>
					<view class="con_top">
						<view class="text">
							水位修正：
						</view>
						<view class="con">
							{{i.zijishuishenxiuzheng}}
						</view>
					</view>
					<view class="con_top">
						<view class="text">
							测线条数：
						</view>
						<view class="con">
							{{i.cexiantiaoshu}}
						</view>
					</view>
					<view class="con_top">
						<uni-table ref="table" border stripe>
							<uni-tr>
								<uni-th width="50" align="center">测线</uni-th>
								<uni-th width="50" align="center">坐标</uni-th>
								<uni-th width="50" align="center">系数</uni-th>
							</uni-tr>
							<uni-tr v-for="(item, index) in cexianlist" :key="index">
								<uni-td align="center">{{ index }}</uni-td>
								<uni-td align="center">{{ item.cR }}</uni-td>
								<uni-td align="center">{{ item.vM }}</uni-td>
							</uni-tr>
						</uni-table>
					</view>
					<view class="con_top">
						<view class="text">
							流量系数：
						</view>
						<view class="con">
							{{i.qk}}
						</view>
					</view>
					<view class="con_top">
						<view class="text">
							水量系数：
						</view>
						<view class="con">
							{{i.shuiliangxishu}}
						</view>
					</view>
					<view class="con_top">
						<view class="text">
							左线系数：
						</view>
						<view class="con">
							{{i.vml}}
						</view>
					</view>
					<view class="con_top">
						<view class="text">
							右线系数：
						</view>
						<view class="con">
							{{i.vmr}}
						</view>
					</view>
				</view>

				<u-button style="width: 300rpx;margin-bottom: 150rpx;margin-top: 50rpx;" type="success" text="点击关闭"
					@click="popupshow = !popupshow"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupshow: false,
				popupData: {
					overlay: true,
					mode: 'left',
					borderRadius: '',
					closeOnClickOverlay: true
				},
				deleteshow: false,
				title: '',
				tabsIf: '',
				measurementArr: [],
				ssId: null,
				miId: null,
				devList: [],
				devId: null,
				stationProfileList: [], //断面
				cexianlist: [], //测线

			}
		},
		onLoad(option) {
			this.ssId = option.id
			let id = option.id
			this.measurementFn(id)

		},
		onShow() {

		},
		methods: {
			// 长按
			devlonFn(i) {
				this.devId = i.id
				this.deleteshow = true
			},
			confirmdel() {
				this.deleteDevFn()
				this.deleteshow = false
			},
			canceldel() {
				this.deleteshow = false
			},
			// 解绑设备
			deleteDevFn() {
				uni.$u.http.delete('/device/surveyStationDevice/removeBinding/' + this.devId).then(res => {
					if (res.code == 200) {
						this.deviceListFn()
					} else {
						uni.showToast({
							title: '删除失败',
							duration: 1500
						});
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 跳转设备
			devbutFn(i) {
				if (i.productName == '浩水雨量站') {
					uni.navigateTo({
						url: '/pages/home/measureFun/yuLiangJi/deviceShowYLZ?id=' + i.did
					});
				}
				if (i.productName == '双水位报警终端') {
					uni.navigateTo({
						url: '/pages/home/shuangShuiWei/show?id=' + i.did
					});
				}
			},
			// 返回
			leftClick() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 断面参数
			rightClick() {
				this.popupshow = true
			},
			// 标签
			tabFn(e) {
				this.miId = e.id
				this.tabsIf = e.name
				this.deviceListFn()
			},
			// 获取设备列表
			deviceListFn(data) {
				uni.$u.http.get('/device/surveyStationDevice/getSurveyStationDeviceList', {
					params: {
						"ssId": this.ssId,
						"miId": this.miId
					}
				}).then(res => {
					console.log('res',res);
					if (res.code == 200) {
						this.devList = res.rows
					}
				}).catch(err => {
					console.log('错误--', err);
				})
			},
			// 获取项目列表
			measurementFn(data) {
				uni.$u.http.get('/device/survey_station/getInfo/' + data).then(res => {
					if (res.code == 200) {
						this.title = res.data.surveyStationName
						this.miId = res.data.measurementItemList[0].id
						this.deviceListFn()
						this.measurementArr = res.data.measurementItemList.map((i) => {
							return {
								id: i.id,
								name: i.measurementName
							}
						})
						this.stationProfileList = res.data.stationProfileList
						let json = res.data.stationProfileList[0].cexianlist
						this.cexianlist = JSON.parse(json)
					}
				}).catch(err => {
					console.log('错误--', err);
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	.tab_box {
		background-color: #ffffff;
	}

	.condata {
		.condata_i {
			margin: 15rpx 30rpx;
			padding: 10rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #e7f0f8;
			border: 3rpx solid #ffffff;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

			.img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 20rpx;
				// background-color: #faa91d;
			}

			.titie {
				.text_a {
					font-size: 45rpx;
					width: 500rpx;
					text-align: center;
					color: #000000;
					// background-color: #c6e17c;
				}

				.text_b {
					font-size: 35rpx;
					color: #666;
					// background-color: #e1e1e1;
				}
			}

		}
	}

	// 断面样式
	.u-popup-slot {
		width: 700rpx;
		height: 100vh;
		overflow-y: auto;
		background-color: #ffffff;

		.bder {
			margin: 30rpx;
			border-radius: 20rpx;
			padding: 20rpx;
			background-color: rgba(255, 255, 255, 0.1);

			.titie_top {
				text-align: center;
				font-size: 50rpx;
				color: #1f1f1f;
				margin-top: 0rpx;
			}

			.con_top {
				display: flex;
				align-items: center;
				// font-size: 35rpx;
				color: #414952;
				// border-bottom: 1rpx solid #eeeeee;
				// border: 2rpx solid #ffffff;
				// box-shadow: 0 0 10rpx 5rpx rgba(54, 54, 54, 0.1);

				.text {
					width: 220rpx;
					text-align: justify;
					text-align-last: justify;
					color: #627e9e;
					line-height: 80rpx;
				}

				.con {
					width: 400rpx;
					font-size: 50rpx;
					color: #ffaa00;
					font-family: 'MyFont';
					background-color: #311f00;
					border-radius: 10rpx;
					margin-left: 20rpx;
					text-align: center;
				}
			}
		}

	}
</style>
<style>
	@font-face {
		font-family: 'MyFont';
		src: url('@/static/fonts/LED.otf');
	}
	page {
		/* background-color: #f8f8f8; */
	}
</style>